<template>
<div :data="dataList">
    <center style="font-size: 20px;font-weight: bold">
        监督和治理体系建设工作推进情况
    </center>
    <div style="margin-top: 80px;width: 80%;margin-left: 10%" v-show="bb">
        <div class="ivu-steps ivu-steps-horizontal">
            <span  v-for="(item,index) in list" :key="item.id" :value="item.id">
                <div class="ivu-steps-item ivu-steps-status-finish" v-if="item===1">
                    <div class="ivu-steps-tail"><i></i></div>
                    <div class="ivu-steps-head">
                        <div class="ivu-steps-head-inner"><span class="ivu-steps-icon ivu-icon ivu-icon-ios-checkmark"></span></div>
                    </div>
                    <div class="ivu-steps-main">
                        <div class="ivu-steps-title">已完成</div>
                        <div class="ivu-steps-content">{{step_str[index]}}</div>
                    </div>
                </div>
                <div class="ivu-steps-item ivu-steps-status-wait" v-if="item===0">
                    <div class="ivu-steps-tail"><i></i></div>
                    <div class="ivu-steps-head">
                        <div class="ivu-steps-head-inner"><span>{{index+1}}</span></div>
                    </div>
                    <div class="ivu-steps-main">
                        <div class="ivu-steps-title">进行中</div>
                        <div class="ivu-steps-content">{{step_str[index]}}</div>
                    </div>
                </div>
            </span>
        </div>
    </div>
    <div style="margin-left: 4%;margin-top: 100px" v-show="cc">
    <Row>
        <Col span="5">
            <Card>
                <center style="font-size: 20px;font-weight: bold">一，统一思想认识</center>
                <center style="margin-top: 15px">
                    <div style="font-size: 15px">{{unity_num}}</div>
                </center>
            </Card>
        </Col>
        <Col span="5" offset="1">
            <Card>
                <center style="font-size: 20px;font-weight: bold">二，搭建组织机构</center>
                <center style="margin-top: 15px">
                    <div style="font-size: 15px">{{organization_num}}</div>
                </center>
            </Card>
        </Col>
        <Col span="5"  offset="1">
            <Card>
                <center style="font-size: 20px;font-weight: bold">三，梳理业务流程</center>
                <center style="margin-top: 15px">
                    <div style="font-size: 15px;">{{operation_num}}</div>
                </center>
            </Card>
        </Col>
        <Col span="5" offset="1">
            <Card dis-hover>
                <center style="font-size: 20px;font-weight: bold">四，找问题堵漏洞</center>
                <center style="margin-top: 15px">
                    <div style="font-size: 15px">{{plugging_num}}</div>
                </center>
            </Card>
        </Col>
    </Row>
    <Row style="margin-top: 30px">
        <Col span="5">
            <Card>
                <center style="font-size: 20px;font-weight: bold">五，推动流程在造</center>
                <center style="margin-top: 15px">
                    <div style="font-size: 15px">0</div>
                </center>
            </Card>
        </Col>
        <Col span="5" offset="1">
            <Card>
                <center style="font-size: 20px;font-weight: bold">六，系统建设改造</center>
                <center style="margin-top: 15px">
                    <div style="font-size: 15px">0</div>
                </center>
            </Card>
        </Col>
        <Col span="5"  offset="1">
            <Card>
                <center style="font-size: 20px;font-weight: bold">七，验收评估完善</center>
                <center style="margin-top: 15px">
                    <div style="font-size: 15px;">0</div>
                </center>
            </Card>
        </Col>
        <Col span="5" offset="1">
            <Card dis-hover>
                <center style="font-size: 20px;font-weight: bold">八，持续推进运用</center>
                <center style="margin-top: 15px">
                    <div style="font-size: 15px">0</div>
                </center>
            </Card>
        </Col>
    </Row>
    </div>
        <Table border :columns="columns1" stripe  :data="data1" style="margin-top: 50px" >
            <template slot-scope=" {row}" slot="one">
                <Icon type="md-checkmark" v-if="row.one==='0'"/>
                <span v-if="row.one !=='0' && row.one !==''">{{row.one}}</span>
            </template>
            <template slot-scope="{ row }" slot="two">
                <Icon type="md-checkmark" v-if="row.two==='1'" />
                <span v-if="row.two !=='1' && row.two !==''">{{row.two}}</span>
            </template>
            <template slot-scope="{ row }" slot="three">
                <Icon type="md-checkmark" v-if="row.three==='2'" />
                <span v-if="row.three !=='2' && row.three !==''">{{row.three}}</span>
            </template>
            <template slot-scope="{ row }" slot="fore">
                <Icon type="md-checkmark" v-if="row.fore==='3'" />
                <span v-if="row.fore !=='3' && row.fore !==''">{{row.fore}}</span>
            </template>
        </Table>
</div>
</template>

<script>
import { getCountState, getStateList, GetZlStateList } from '@/api/user'
export default {

  name: 'index',

  data () {
    return {
      data0: {},
      data1: [],
      num: [],
      columns1: [
        {
          title: '单位名称',
          align: 'center',
          key: 'name'
        }, {
          title: '一，统一思想认识',
          align: 'center',
          slot: 'one'
        },
        {
          title: '二，搭建组织机构',
          align: 'center',
          slot: 'two'
        },
        {
          title: '三，梳理业务流程',
          align: 'center',
          slot: 'three'
        },
        {
          title: '四，找问题堵漏洞',
          align: 'center',
          slot: 'fore'
        },
        {
          title: '五，推动流程在造',
          align: 'center',
          key: 'five'
        },
        {
          title: '六，系统建设改造',
          align: 'center',
          key: 'sex'
        },
        {
          title: '七，验收评估完善',
          align: 'center',
          key: 'seven'
        },
        {
          title: '八，持续推进运用',
          align: 'center',
          key: 'eit'
        }
      ],
      list: [],
      state: '',
      unity_num: 0,
      dataList: [],
      organization_num: 0,
      operation_num: 0,
      plugging_num: 0,
      current: 0,
      // step: [0, 1, 1, 1, 0, 0, 0, 0],
      step_str: ['一，统一思想认识', '二，搭建组织机构', '三，梳理业务流程', '四，找问题堵漏洞', '五，推动流程在造', '六，系统建设改造', '七，验收评估完善', '八，持续推进运用']
    }
  },

  props: {

  },

  components: {

  },

  computed: {
    bb () {
      let a = this.$store.state.user.severUserInfo.data.company_name
      if (a !== undefined) {
        if (a.slice(a.length - 3, a.length) === '委领导' || a.slice(a.length - 3, a.length) === '纪检组' || a.slice(a.length - 3, a.length) === '监察室') {
          return false
        } else {
          return true
        }
      }
      return 1
    },
    cc () {
      let a = this.$store.state.user.severUserInfo.data.company_name
      if (a !== undefined) {
        if (a.slice(a.length - 3, a.length) === '委领导' || a.slice(a.length - 3, a.length) === '纪检组' || a.slice(a.length - 3, a.length) === '监察室') {
          return true
        } else {
          return false
        }
      }
      return 1
    }
  },

  methods: {
    handleSummary ({ columns, data }) {
      const sums = {}
      let a = this.num[0]
      let b = this.num[1]
      columns.forEach((column, index) => {
        const key = column.key
        const slot = column.slot
        if (index === 0) {
          sums[key] = {
            key,
            value: '总计'
          }
        } else if (index === 2) {
          sums[slot] = {
            slot,
            value: a.unity_num + '/' + b.number
          }
          // return
        } else {
          sums[key] = {
            key,
            value: null
          }
        }
      })
      this.data0 = sums
      console.log(sums, '333')
      return sums
    },
    async init () {
      await getCountState().then(ret => {
        if (ret.data.errcode === 10003) {
          // this.init()
          // this.dataList = ret.data.data
        } else if (ret.data.errcode === 0) {
          this.dataList = ret.data.data
          this.unity_num = this.dataList.unity_num
          this.organization_num = this.dataList.organization_num
          this.operation_num = this.dataList.operation_num
          this.plugging_num = this.dataList.plugging_num
        } else {
          this.$Notice.error({ title: ret.data.errmsg, desc: '' })
        }
      })
    }
  },
  mounted () {
    console.log(this.$store.state.user.severUserInfo.data.company_name, '长度')
    GetZlStateList({}).then(ret => {
      let a = ret.data.data.splice(0, ret.data.data.length - 2)
      this.num = ret.data.data
      let q = this.num[0]
      let w = this.num[1].number
      for (let i = 0; i < a.length; i++) {
        this.data1.push({
          name: a[i].department_name
        })
        let b = a[i].type.split(',')
        for (let j = 0; j < b.length; j++) {
          if (b[j] === '0') {
            this.data1[i].one = '0'
          }
          if (b[j] === '1') {
            this.data1[i].two = '1'
          }
          if (b[j] === '2') {
            this.data1[i].three = '2'
          }
          if (b[j] === '3') {
            this.data1[i].fore = '3'
          }
        }
      }
      this.data1.push({
        name: '总计',
        one: q.unity_num + '/' + w,
        two: q.organization_num + '/' + w,
        three: q.operation_num + '/' + w,
        fore: q.plugging_num + '/' + w
      })
      console.log(this.data1, '00000000000')
    })
    this.init()
    getStateList().then(ret => {
      ret.data.data[0].num.split(',').forEach(item => {
        this.list.push(parseInt(item))
      })
      console.log(this.list, 'list')
    })
  }

}
</script>

<style scoped>

</style>
